<script setup lang="ts" name="/page2-2">
import { reactive, ref } from "vue";
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

let dialogVisible = ref<Boolean>(false);
let user = ref('');
let pwd = ref('');

const handleClose = ()=>{
    user.value = '';
    pwd.value = ''
}

const userListAll = reactive(JSON.parse(localStorage.getItem('user')!))

const submit = () :void =>{
    userListAll.value = userListAll.push({
        id:Math.floor(Math.random() * (999 - 1) + 3),
        user:user.value,
        pwd:pwd.value
    })
    localStorage.setItem('user',JSON.stringify(userListAll))
    ElMessage({
        message: '创建成功',
        type: 'success',
    })
    dialogVisible.value = false;
}
</script>

<template>
    <div>
        <el-button type="primary" :icon="Plus"  @click="dialogVisible = true">{{ $t('defaultFont.createAccount') }}</el-button>
        <el-card class="box-card">
            <div v-for="(item,index) in userListAll" :key="index">{{ item.user }}</div>
        </el-card>
    </div>
    <!-- 创建账号弹出框 -->
    <el-dialog
    v-model="dialogVisible"
    :title="$t('defaultFont.createAccount')"
    width="30%"
    @closed="handleClose"
  >
    {{ $t('defaultFont.username') }}<el-input v-model="user"/>
    {{ $t('defaultFont.password') }}<el-input v-model="pwd"/>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('defaultFont.cancel') }}</el-button>
        <el-button type="primary" @click="submit">{{ $t('defaultFont.ok') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
    .box-card{
        margin-top:10px;
    }
</style>
